<template>
  <q-dialog v-model="show" @hide="handleClose">
    <q-card style="min-width: 400px; max-width: 500px">
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">关于</div>
        <q-space />
        <q-btn icon="close" flat round dense v-close-popup />
      </q-card-section>

      <q-card-section class="q-pt-md">
        <div class="text-center q-mb-md">
          <q-icon name="chat_bubble" size="64px" color="primary" />
          <div class="text-h5 q-mt-md">Violet IM</div>
          <div class="text-caption text-grey-6 q-mt-sm">版本 1.0.0</div>
        </div>
        <q-separator class="q-my-md" />
        <div class="text-body2">
          <p>Violet IM 是一款现代化的即时通讯应用，提供安全、快速的消息传递服务。</p>
          <p class="q-mt-md">功能特性：</p>
          <ul>
            <li>实时消息传递</li>
            <li>好友管理</li>
            <li>群组聊天</li>
            <li>文件传输</li>
            <li>隐私保护</li>
          </ul>
        </div>
        <q-separator class="q-my-md" />
        <div class="text-center q-mt-md">
          <q-btn 
            unelevated 
            color="primary" 
            label="检查更新" 
            icon="system_update"
            @click="handleCheckUpdate"
            :loading="checkingUpdate"
          />
        </div>
        <q-separator class="q-my-md" />
        <div class="text-caption text-grey-6 text-center">
          © 2024 Violet IM. All rights reserved.
        </div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { manualCheckForUpdates } from '../services/updater'
import { isTauri } from '../services/secure-storage'

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const show = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

const checkingUpdate = ref(false)

const handleClose = () => {
  show.value = false
}

const handleCheckUpdate = async () => {
  if (!isTauri()) {
    return
  }
  
  checkingUpdate.value = true
  try {
    await manualCheckForUpdates()
  } finally {
    checkingUpdate.value = false
  }
}
</script>

<style scoped>
</style>

